<%-- 
    Document   : attendancedetail
    Created on : 2019-7-19, 9:29:21
    Author     : dusin
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <link rel="stylesheet" href="../../js/jquery/themes/default/easyui.css" type="text/css" />
        <link rel="stylesheet" href="../../js/jquery/themes/icon.css" type="text/css" />
        <link rel="stylesheet" href="../../js/jquery/themes/color.css" type="text/css" />
        <link rel="stylesheet" href="../../css/demo.css" type="text/css" />
        <script type="text/javascript" src="../../js/jquery/jquery.min.js"></script>
        <script type="text/javascript" src="../../js/jquery/jquery.easyui.min.js"></script>
        
    </head>
    <body>
        <script type="text/javascript">
            var url;
            var teachclassid = '<%=session.getAttribute("teachclassid")%>'
            var no = '<%=request.getParameter("no")%>';
            var teachclassname = '<%=request.getParameter("text")%>';
            var courseName = '<%=session.getAttribute("courseName")%>'
            var attendanceId = '<%=request.getParameter("attendanceId")%>';
            var dgName = 'dg-detail';
            //alert(teachclassid+teachclassname);
            var teachclassno;
            $(document).ready(function() {
                //alert(attendanceId);
                //$('#dg-detail').attr('id','dg-detail');  //是的每创建一个数据表格都有一个不同的id
                //var panel = $('#dg-detail').datagrid('getPanel');
                //panel.panel('setTitle',courseName+'考勤'+no);
                //window.frames['mainFrame'].$('#dg-detail').datagrid("getPanel").panel('setTitle','abc');
                //var panel = $('#dg-detail').datagrid('getPanel');
                //alert(panel);
                $('#dg-detail').datagrid({title:courseName+'->考勤'+no});
            });

           function cancel(){
               $('#tabs').tabs('close', '考勤明细');
           }
            function refresh() {
                $('#dg-detail').datagrid('reload');    // reload the user data
            }
        
            var editIndex = undefined;
            function endEditing() {
                if (editIndex == undefined) {
                    return true;
                }
                if ($('#dg-detail').datagrid('validateRow', editIndex)) {
                    var ed = $('#dg-detail').datagrid('getEditor', {index: editIndex, field: 'status'});
                    var name = $(ed.target).combobox('getText');
                    $('#dg-detail').datagrid('getRows')[editIndex]['status'] = name;
                    $('#dg-detail').datagrid('endEdit', editIndex);
                    editIndex = undefined;
                    return true;
                } else {
                    return false;
                }
            }
            function onDblClickRow(index) {
                var ed = $('#dg-detail').datagrid('getEditor', {index: index, field: 'status'});
                //$(ed.target).combobox('select',0);     //自动选中第一项，否则会返回""
                if (editIndex != index) {
                    if (endEditing()) {
                        $('#dg-detail').datagrid('selectRow', index)
                                .datagrid('beginEdit', index);
                        editIndex = index;
                    } else {
                        $('#dg-detail').datagrid('selectRow', editIndex);
                    }
                }
            }
            function onClickRow(index) {
                endEditing();
            }

            function accept() {
                if (endEditing()) {
                    $('#dg-detail').datagrid('acceptChanges');
                }
            }
            function reject() {
                $('#dg-detail').datagrid('rejectChanges');
                editIndex = undefined;
            }
            function getChanges() {  //将变化发送到后台保存
                 endEditing();   //先结束编辑
                var rows = $('#dg-detail').datagrid('getChanges');
                //if(rows.length==0) return;    发现 如果全勤也需要保存 考勤记录，所以取消该语句
                var data=new Array(rows.length);
                for(var i=0;i<rows.length;i++){
                    var rec={};
                    rec.studentNo = rows[i].studentno;
                    rec.note = rows[i].note;
                    if(rows[i]==null||rows[i]==undefined||rows[i]==""||rows[i]==0){
                        rec.stauts = 0;
                    }else{
                        rec.status = rows[i].status;
                    }
                    data[i] = rec;
                }                
                var dataStr = JSON.stringify(data);
                $.ajax({url:"../../servlet/teacher/UpdateAttendance",
                    data:{data:dataStr,no:no,attendanceId:attendanceId},
                    success:function(result){
                        var r = eval('('+result+')');
                        if(r.attendanceId)
                            attendanceId=r.attendanceId;
                        $.messager.show({ title:'提示', msg:'考勤记录已保存', timeout:5000, showType:'slide'});
                        accept();
                       //$('#dg').datagrid('reload');    // reload the user data
                    },
                    error:function(result){
                        $.messager.show({ title:'提示', msg:'考勤记录保存失败', timeout:5000, showType:'slide'});
                    }
                 });     
                }
            function formatterAttendanceStatus(value, row){
                if(value==1){   //这里value的类型是String，不能用‘===’三等号
                    return '<span style="color:red;">'+'✖'+'</span>';
                }else if(value==2){
                    return '<span style="color:blue;font-size:30px">'+'△'+'</span>';
                }else if(value==3){
                    return '<span style="color:blue;">'+'◯'+'</span>';
                }else if(value==4){
                    return '<span style="color:yellow;">'+'L'+'</span>';
                }else if(value==5){
                    return '<span style="color:yellow;">'+'E'+'</span>';
                }else{
                   return '<span style="color:green;">'+'✔'+'</span>';
                }                
            }

        </script>
        <table id="dg-detail" title="${courseName}" class="easyui-datagrid"
               url="../../servlet/teacher/GetAttendanceDetail"
               toolbar="#toolbar-detail"
               rownumbers="true" fitColumns="true"
               data-options="iconCls: 'icon-edit',
               singleSelect: true,
               height:($(window).height()-40)+'px',
               onClickRow:onClickRow,
               queryParams:{attendanceId:attendanceId},
               onDblClickRow: onDblClickRow
               ">
            <thead>
                <tr>                    
                    <th field="no" width="50">序号</th>
                    <th field="studentno" width="100">学号</th>
                    <th field="name" width="150">姓名</th>
                    <th field="pinyin" width="100">拼音</th>                    
                    <th data-options="field:'status',width:100,align:'center',
                        formatter:formatterAttendanceStatus,
                        editor:{
                        type:'combobox',
                        options:{
                        valueField:'id',
                        textField:'name',                        
                        method:'get',
                        url:'../data/attendancetype.json',
                        required:true
                        }
                        }">状态</th>
                    <th data-options="field:'note',width:150,editor:'textbox'">备注</th> 
                </tr>
            </thead>
        </table>
        <div id="toolbar-detail">            
            <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="cancel()">取消</a>            
            <a href="#" class="easyui-linkbutton" iconCls="icon-reload" plain="true" onclick="refresh()">刷新</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="getChanges()">保存</a>
        </div>
        
        <style type="text/css">
            #fm{
                margin:0;
                padding:10px 30px;
            }
            .ftitle{
                font-size:14px;
                font-weight:bold;
                padding:5px 0;
                margin-bottom:10px;
                border-bottom:1px solid #ccc;
            }
            .fitem{
                margin-bottom:5px;
            }
            .fitem label{
                display:inline-block;
                width:80px;
            }
            .fitem input{
                width:160px;
            }
        </style>
    </body>
</html>
